<template>
	<view v-if="info" class="page">
		<view class="bgff u-flex u-col-center paddLR main1">
      <view class="div u-flex-1">
        <view class="u-font-32 text-weight">{{info.crowdInfo.name}}</view>
        <view class="lab u-tips-color">社区交友</view>
      </view>
      <image :src="info.crowdInfo.image" mode="aspectFill" class="img"></image>
    </view>
    <view class="bgff main2 paddLR u-flex u-row-between">
      <view class="item">
        <view class="p1">{{info.crowdUserInfo.length}}+</view>
        <view class="tip">成员</view>
      </view>
      <view class="item">
        <view class="p1">{{info.crowdInfo.createtime_text}}</view>
        <view class="tip">运营天数</view>
      </view>
      <!-- <view class="item">
        <view class="p1">70+</view>
        <view class="tip">主题</view>
      </view> -->
    </view>
    
    <view class="bgff main3 paddLR">
      <view class="u-font-32 text-weight u-m-b-20">{{info.crowdInfo.name}}介绍</view>
      <rich-text class="remark" v-if="info.crowdInfo.remark" :nodes="info.crowdInfo.remark"></rich-text>
      <view v-else class="remark">-</view>
    </view>
     <!-- -->
    <view class="paddLR" v-if="info.crowdInfo.type_id > 1">
      <view class="btn" @click="jounGroup">去加入</view>
    </view>
  </view>
</template>

<script>
import { TUILogin } from "@tencentcloud/tui-core";
import TUIChatEngine, { } from '@tencentcloud/chat-uikit-engine';
const { chat } = TUILogin.getContext();
export default {
	data() {
		return {
			loading: true,
			status: 'loadmore',
			is_update: false,
			has_more: false,
			current: 0,
			scrollTop: 0,
			navigateList: [],
			hots: [],
			recommends: [],
      friendList:[],
      info:null
		};
	},
  onLoad(e){
    this.$api.getCrowdDetailApi({id:e.id}).then(res=>{
      this.info = res.data
    })
  },
	onShow() {
    
	},
	computed: {
		notice() {
			let arr = [];
			if (this.vuex_config.notice) {
				this.vuex_config.notice.map(item => {
					arr.push(item.title);
				});
			}
			return arr;
		},
		navigates() {
			if (this.vuex_config.navigate) {
				let arr1 = [],
					arr2 = [];
				this.vuex_config.navigate.forEach((item, index) => {
					if (((index + 1) % 9 == 0 && index != 0) || index + 1 == this.vuex_config.navigate.length) {
						arr2.push(item);
						arr1.push(arr2);
						arr2 = [];
					} else {
						arr2.push(item);
					}
				});
				this.navigateList = arr1;
			}
			return 1;
		}
	},
	methods: {
    jounGroup(){
      // chat.searchGroupByID(this.info.crowdInfo.group_id);
      const that = this;
      let promise = chat.joinGroup({
        groupID:this.info.crowdInfo.group_id,
        applyMessage:'我想加入你们这个大家庭'
      });
      promise.then(function(imResponse) {
        if(imResponse.data.status === TUIChatEngine.TYPES.JOIN_STATUS_WAIT_APPROVAL){
          return uni.showToast({
            title:'请等待管理员同意',
            icon:'none'
          })
        }else if(imResponse.data.status === TUIChatEngine.TYPES.JOIN_STATUS_SUCCESS){
          this.addJoin()
          return uni.showToast({
            title:'恭喜加群成功',
            icon:'none'
          })
        }else if(imResponse.data.status === TUIChatEngine.TYPES.JOIN_STATUS_ALREADY_IN_GROUP){
          return uni.showToast({
            title:'您已经在群中',
            icon:'none'
          })
        }
        const group = imResponse.data.group; // 群组信息
        console.log('jounGroup ok:', group); // 搜素群组失败的相关信息
      }).catch(function(imError) {
         // 搜素群组失败的相关信息
        const msg = that.getErrorMsg(imError.code)
        uni.showToast({
          title:msg,
          icon:'none'
        })
        console.error(imError.code, msg);
      });
      
    },
    
    getErrorMsg (type) {
      let msg = ''
      if(type === 10002){
        msg = '服务端内部错误，请重试。'
      } else if(type === 10003){
        msg = '请求中的接口名称错误，请核对接口名称并重试。'
      } else if(type === 10004){
        msg = '参数非法，请根据错误描述检查请求是否正确。'
      } else if(type === 10005){
        msg = '请求包体中携带的账号数量过多。'
      } else if(type === 10006){
        msg = '操作频率限制，请尝试降低调用的频率。'
      } else if(type === 10007){
        msg = '操作权限不足（例如 Public 群组中普通成员尝试执行踢人操作，但只有 App 管理员才有权限；或者非群成员操作）'
      } else if(type === 10009){
        msg = '该群不允许群主主动退出。'
      } else if(type === 10010){
        msg = '群组不存在，或者曾经存在过，但是目前已经被解散。'
      } else if(type === 10011){
        msg = '解析 JSON 包体失败，请检查包体的格式是否符合 JSON 格式。'
      } else if(type === 10012){
        msg = '发起操作的 UserID 非法，请检查发起操作的用户 UserID 是否填写正确。'
      } else if(type === 10013){
        msg = '用户已经是群成员。'
      } else if(type === 10014){
        msg = '群已满员，无法将请求中的用户加入群组，如果是批量加人，可以尝试减少加入用户的数量。'
      } else if(type === 10015){
        msg = '无效的群组 ID，表示群组不存在或已经被解散。'
      }
      return msg
    },
    
    addJoin(){
      const that = this;
      that.$api.addCrowdUserApi({group_id:that.info.crowdInfo.group_id}).then(res=>{
        uni.showToast({
          title:'您的加群申请已提交'
        })
      }).catch(()=>{
        that.addJoin()
      })
    },
		change(e) {
			this.current = e.detail.current;
		},
		grids(e) {
			let path = e.path;
			if (path == '/' || !path) {
				return;
			}
			if (path.substr(0, 1) == 'p') {
				path = '/' + path;
			}
			if (path.includes('http')) {
				this.$u.vuex('vuex_webs', {
					path: e.path,
					title: e.name
				});
				this.$u.route('/pages/webview/webview');
				return;
			}
      if (path === '/pages/goods/goods') {
        uni.switchTab({
          url: path
        })
        return
      }
			this.$u.route(path);
		},
		openPage(index) {
			this.grids({
				path: this.vuex_config.swiper[index].url,
				name: this.vuex_config.swiper[index].title
			});
		},
		click(index) {
			if (this.vuex_config.notice) {
				let url = this.vuex_config.notice[index].path;
				if (url) {
					this.grids({
						path: url,
						name: this.vuex_config.notice[index].title
					});
				}
			}
		},
		getGoodsIndex() {
			this.$api.getGoodsIndex().then(({code,data:res,msg}) => {
				if (code) {
          if(res.hots.length > 4){
            this.hots = [res.hots[0], res.hots[1], res.hots[2], res.hots[3]];
          }else{
            this.hots = res.hots;
          }
					
					this.recommends = res.recommends;
				}
			});
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {},
	onReachBottom() {}
};
</script>


<style lang="scss" scoped>
.bgff{background-color: #fff;}
.page{background-color: #F9F9F9; min-height: 100vh;}
.paddLR{padding-left: 30rpx !important; padding-right: 30rpx !important;}
.lab{color: rgba(23, 26, 29, 0.6); font-size: 24rpx; padding: 0 20rpx; background-color: rgba(245, 245, 247, 1); border-radius: 8rpx; line-height: 56rpx; display: inline-block; margin-top: 36rpx;}
.main1{padding-bottom: 34rpx; border-bottom: 1px solid #ededed; bacground-color:#fff; padding-top: 44rpx;}
.img{width: 140rpx; height: 140rpx; border-radius: 16rpx;}
.main2{
  border-bottom: 20rpx solid #F9F9F9; bacground-color:#fff; justify-content: center; 
  .item{text-align: center; font-size: 32rpx; color: #000000; line-height: 1; padding: 24rpx 42rpx 44rpx; width: 50%;}
  .tip{color: rgba(23, 26, 29, 0.6); font-size: 24rpx; margin-top: 10rpx;}
}
.main3{
  padding: 42rpx 0;
  .remar{color: rgba(0,0,0,0.5);}
}
// .bottom-box{
//   position: fixed; width: 100%;
// }
.btn{width: 100%; height: 88rpx; background-color: #151515; border-radius: 50rpx; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32rpx; max-width: 674rpx; margin: 50rpx auto;}
</style>

